<template>
	<!-- 店铺 -->
	<scroll-view class="store_container" scroll-y="true" @scroll="handleScroll">
		<!-- 店铺信息 -->
		<view class="store_info">
			<view class="store_info_left">
				<img class="store_pic" :src="storeD.storePicture ? (baseUrl + storeD.storePicture) : defaultImage" alt="" srcset="">
			</view>
			<view class="store_info_right">
				<view class="store_info_right_name">
					{{ storeD.storeName }}
				</view>
				<view class="store_info_right_start">
					<uni-rate v-model="storeD.start" :readonly="true" :size="16"/>
				</view>
			</view>
			<!-- 进店按钮 -->
			<view class="welcome">
				欢迎光顾
			</view>
		</view>
		<!-- 优惠券领取区 -->
		<view class="get_coupon" v-if="haveCouponFlag">
			<view class="coupon_item" 
				v-for="(item, index) of couponData" 
				:key="index"
				:class="{'notFirstCouponItem': index != 0}"
				>
				<view class="coupon_item_value_limit">
					<view class="coupon_item_value">
						￥{{ item.value }}
					</view>
					<view class="coupon_item_limit" v-if="item.limit != 0">
						满{{item.limit}}可用
					</view>
					<view class="coupon_item_limit" v-if="item.limit == 0">
						无门槛
					</view>
				</view>
				<view class="coupon_item_info">
					<view class="coupon_item_info_title">
						店铺优惠券
					</view>
					<view class="coupon_item_info_expire_use">
						<view class="coupon_item_info_expire">
							到期：{{ item.expireTime }}
						</view>
						<view class="coupon_item_info_use_btn">
							<button 
								type="default" 
								class="coupon_item_info_use_btn_B"
								v-if="!item.isGet"
								@click="OpsCoupon(0, item)"
								>
								领取
							</button>
							<button
								type="default" 
								class="coupon_item_info_use_btn_B"
								v-if="item.isGet"
								@click="OpsCoupon(1, item)"
								>
								使用
							</button>
						</view>
					</view>
					<view class="coupon_item_info_tip">
						该券仅限制在店铺内可用
					</view>
				</view>
			</view>
			<!-- 占位 -->
			<!-- <view style="width: 60rpx;"></view> -->
		</view>
		<!-- 店铺商品列表 -->
		<view class="store_goods_list">
			<GoodsList ref="goodsList" showType="store" :typeValue="storeId" />
		</view>
	</scroll-view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from "vue";
import GoodsList from "../../components/GoodsList/GoodsList.vue"
import  dayJs from "dayjs"

// 店铺信息
let storeD = ref({});
// 图片基础路径
let baseUrl = uni.$baseUrl
// 商品列表组件节点
let goodsList = ref(null);
let storeId = ref("");

let defaultImage = ''

// 店铺是否存在可领取的优惠券标识
let haveCouponFlag = ref(false);
let couponData = ref([]);

onLoad((options)=>{
	// 取出店铺ID，查询店铺信息
	getStoreD(options.storeId);
	storeId.value = options.storeId;
	// 获取店铺提供的优惠券信息
	getCouponInfos();
})

// 获取优惠券信息展示
async function getCouponInfos(){
	const res = await uni.$http.get(`/couponInfos/getCouponInfosByStoreId/${storeId.value}`);
	// 鉴空，为空隐藏领券区
	if(res.data.data.length == 0){
		haveCouponFlag.value == false;
		return 1;
	}
	
	// 显示领券区
	haveCouponFlag.value = true;
	couponData.value = res.data.data;
	
	// 格式化到期时间的显示
	// 遍历添加是否已经领取券的标识
	for(let item of couponData.value){
		// 格式化时间
		item["expireTime"] = dayJs(item.expireTime).format("YYYY-MM-DD");
		// 动态添加是否领取券标识
		item["isGet"] = await checkIsGet(item.couponId);
	}
	
	console.log("店铺提供的可领优惠券：", res);
}

// 领取或使用优惠券按钮触发
function OpsCoupon(opsFlag, couponInfo){
	if(opsFlag == 0){
		// 领取操作
		execGetCoupon(couponInfo);
	}else{
		// 使用操作
		uni.showToast({
			title: '在店铺里逛逛吧',
			icon: "none"
		});
	}
}

// 用户领取优惠券
async function execGetCoupon(couponInfo){
	let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
	let res = await uni.$http.get(`/couponInfos/userGetCoupon/${userInfo.userId}/${couponInfo.couponId}`);
	console.log("领取结果：", res);
	
	// 刷新优惠券领取信息
	getCouponInfos();
	
}

// 检查用户是否领过某券
async function checkIsGet(couponId){
	// 获取当前用户登录信息
	let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
	
	// 构造请求参数对象
	let paramObj = {
		userId: userInfo.userId,
		couponId: couponId
	}
	
	const res = await uni.$http.post(`/couponInfos/checkIsGet`, paramObj);
	return res.data.data;
}

// 滚动监听是否触底，动态懒加载商品数据
function handleScroll(event) {
	const systemInfo = uni.getWindowInfo();
	const pageHeight = systemInfo.windowHeight; 
	const { scrollTop, scrollHeight } = event.target;

	// 判断是否滚动到底部
	if (scrollTop + pageHeight + 60 >= scrollHeight) {
		console.log("触底");
		console.log(goodsList.value);
		goodsList.value.loadMore(); // 调用子组件的方法进行懒加载
	}
}

// 获取店铺信息
async function getStoreD(storeId){
	const res = await uni.$http.get(`/storeInfo/getStoreInfoById/${storeId}`);
	storeD.value = res.data.data;
}
</script>

<style lang="scss" scoped>
.store_container{
	height: 100vh;
	overflow-y: auto;
}

.store_info{
	margin-top: 10rpx;
	background-color: #fff;
	display: flex;
	position: relative;
	padding: 20rpx 20rpx;
}

.store_info_left{
	width: 14%;
}

.store_info_right{
	width: 70%;
	// border: solid red 1px;
}

.store_pic{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: solid #aaaaaa 1px;
}

.store_info_right_name{
	font-weight: 600;
}

.store_info_right_start{
	margin-top: 10rpx;
}

.into_store{
	position: absolute;
	right: 20rpx;
}

.into_store_btn{
	width: 120rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	position: relative;
	top: 10rpx;
}

.welcome{
	min-width: max-content;
	// border: solid red 1px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #ff854c;
}

.store_goods_list{
	margin-top: 10rpx;
	// background-color: #fff;
}

.get_coupon{
	margin-top: 15rpx;
	overflow-x: auto;
	display: flex;
	width: 97vw;
	padding: 15rpx;
	background: linear-gradient(to bottom right, #ff8f34, #ff6f71);
	padding-right: 60rpx;
}

.notFirstCouponItem{
	margin-left: 20rpx;
}

.coupon_item{
	display: flex;
	border: solid #ff989a 1px;
	border-radius: 15rpx;
	background-color: #fff;
	padding: 15rpx;
}

.coupon_item_value_limit{
	width: 35%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: red;
	font-size: 12px;
}

.coupon_item_value{
	font-size: 22px;
}

.coupon_item_limit{
	padding-top: 10rpx;
}

.coupon_item_info{
	width: 65%;
	font-size: 13px;
	padding: 10px 30rpx;
}

.coupon_item_info_use_btn_B{
	width: 100rpx;
	height: 50rpx;
	font-size: 13px;
	margin-left: 50rpx;
	background-color: #ff6d19;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.coupon_item_info_expire_use{
	padding-top: 10rpx;
	display: flex;
	flex-wrap: nowrap;
	min-width: max-content;
	align-items: center;
}

.coupon_item_info_tip{
	padding-top: 10rpx;
}

</style>
